import React from 'react';
import Header from './header/header';
import Player from './player/player';
import List from './list/list';
import {MUSIC_LIST} from './config/config';
import Pubsub from 'pubsub-js';

import {Route, Router, IndexRoute, Link ,hashHistory } from 'react-router';

let App = React.createClass({

    getInitialState(){
        let REPEAT_TYPE = ['cycle','random','once'];
        return {
            musicList : MUSIC_LIST,
            currentMusicItem : MUSIC_LIST[0],
            repeatTypes : REPEAT_TYPE,
            repeatType : REPEAT_TYPE[0]
        }
    },
    render() {
        //console.log(this.state.currentMusicItem )
        return (
            <div>
                <Header/>
                {React.cloneElement(this.props.children ,this.state)}
            </div>
        );
    },
    playMusic(item){
        //console.log('playMysic',item)
        $("#player").jPlayer("setMedia", {
            mp3: item.file
        }).jPlayer('play');

        this.setState({
            currentMusicItem : item
        })
    },
    playNext(type = 'next') {

        let index = this.getMusicListIndex(this.state.currentMusicItem);
        let newIndex = null;
        let musicListLength = this.state.musicList.length;
        if(this.state.repeatType == 'random'){
            newIndex = Math.floor(Math.random() * musicListLength);
        } else if (this.state.repeatType == 'once'){
            newIndex = index;
        } else {
            if (type == 'next') {
                newIndex = (index + 1) % musicListLength;
            } else {
                newIndex = (index - 1 + musicListLength) % musicListLength;
            }
        }
        this.playMusic(this.state.musicList[newIndex]);
    },
    getMusicListIndex (musicItem) {
        return this.state.musicList.indexOf(musicItem);
    },
    changeMusicRepeat(){
        let index = this.state.repeatTypes.indexOf(this.state.repeatType);
        let length = this.state.repeatTypes.length;
        let newIndex = (index + 1) % length;
        this.setState({
            repeatType : this.state.repeatTypes[newIndex]
        })
    },
    componentDidMount() {
        $("#player").jPlayer({
            supplied: "mp3",
            wmode: "window",
            useStateClassSkin: true
        });
        this.playMusic(this.state.currentMusicItem);

        $("#player").bind($.jPlayer.event.ended,(e)=>{
            this.playNext();
        });
        Pubsub.subscribe('DELETE_MUSIC', (msg, musicItem)=>{

            this.setState({
               musicList: this.state.musicList.filter(item =>{
                   return item !== musicItem;
               })
            })
        });
        Pubsub.subscribe('PLAY_MUSIC', (msg, item)=>{
            this.playMusic(item);
        });
        Pubsub.subscribe('PLAY_PREV', (msg)=>{
            this.playNext('prev');
        });
        Pubsub.subscribe('PLAY_NEXT', (msg)=>{
            this.playNext();
        });
        Pubsub.subscribe('CHANGE_REPEAT', (msg)=>{
            this.changeMusicRepeat();
        });
    },
    componentWillMount(){
        Pubsub.unsubscribe('DELETE_MUSIC');
        Pubsub.unsubscribe('PLAY_MUSIC');
        Pubsub.unsubscribe('PLAY_PREV');
        Pubsub.unsubscribe('PLAY_NEXT');
        Pubsub.unsubscribe('CHANGE_REPEAT');
        $("#player").unbind($.jPlayer.event.ended);
    }
});

let Root = React.createClass({
    render(){
        return <Router history={hashHistory}>
            <Route path='/' component={App}>
                <IndexRoute component={Player}></IndexRoute>
                <Route path='/list' component={List}></Route>
            </Route>
        </Router>
    }
});
export default Root;